<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Global Mall</title>
  <link rel="icon" href="assets/image/logo/favicon.png" type="image/png" sizes="32x32">
  <link href="assets/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css">
  <link rel="stylesheet" type="text/css" href="assets/fonts/css2.css">
  <link rel="stylesheet" type="text/css" href="assets/css/jquery.fancybox.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
  <link rel="stylesheet" type="text/css" href="assets/css/style.css">
  <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>

<body>
  <!-- page loder -->
  <div class="preloader"></div>
  <?php
  include 'header.php';
  ?>
  <!-- Hero section start -->
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <!-- First Slider -->
      <div class="carousel-item active">
        <img src="assets/image/slider-banner/slider1.png" class="d-block w-100" alt="...">
        <!-- <div class="carousel-caption1 typewriter">
          <h1 class="category-collections-hero">发 现 心 仪 好 物</h1>
          <br>
          <p class="testing2">尽在指尖，购物从未如此简单，海量商品等你挑选！</p>
          <p class="shop-now-btn">SHOP NOW</p>
        </div> -->
      </div>
      <!-- First Slider End -->
      <!-- Second Slider -->
      <div class="carousel-item">
        <img src="assets/image/slider-banner/slider2.jpg" class="d-block w-100" alt="...">
        <!-- <div class="carousel-caption1 typewriter">
          <h1 class="category-collections-hero">轻松购物，尽享优惠</h1>
          <br>
          <p class="testing2">每一次购物都超值，专属折扣、限时抢购等你来享！</p>
          <p class="shop-now-btn">SHOP NOW</p>
        </div> -->
      </div>
      <!-- Second Slider End -->
      <!-- Thrid Slider -->
      <div class="carousel-item">
        <img src="assets/image/slider-banner/slider3.jpg" class="d-block w-100" alt="...">
        <!-- <div class="carousel-caption1 typewriter">
          <h1 class="category-collections-hero">全新购物体验</h1>
          <br>
          <p class="testing2">秒杀优惠、超值折扣，快来尽情挑选，购物乐趣触手可得！</p>
          <p class="shop-now-btn">SHOP NOW</p>
        </div> -->
      </div>
      <!-- Third Slider End -->
    </div>
  </div>
  <div class="container mt-5" id="feature">
    <div class="row">
      <div class="col-12">
        <h4 class="product-heading2">热 门 商 品</h4>
      </div>
    </div>
  </div>
  <?php
  // 查询商品信息
  $sql = "SELECT id, name, price, image FROM products LIMIT 6"; // 可以限制数量或不限制
  $result = $conn->query($sql);
  ?>

  <div class="container section-spacing2">
    <div class="row section-space-row">
      <div id="feature_product" class="owl-carousel owl-theme">

        <?php while ($row = $result->fetch_assoc()) { ?>
          <div class="item">
            <div class="col-12 section-space">
              <div class="d-flex justify-content-between product_secon2">
                <span class="badge bg-danger">New</span>
              </div>
              <div class="product_secon">
                <a class="sub-heading" href="single-product.php?id=<?php echo $row['id']; ?>">
                  <img src="<?php echo htmlspecialchars($row['image']); ?>" alt="Product" class="imagee img-fluid">
                  <?php echo htmlspecialchars($row['name']); ?>
                </a>
                <p class="price"><span class="on-price">￥<?php echo number_format($row['price'], 2); ?></span></p>
              </div>
            </div>
          </div>
        <?php } ?>
      </div>
    </div>
  </div>
  <div class="container mt-5 mb-5">
    <div class="row">
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div>
          <ul class="service">
            <li class="d-sm-inline-block d-md-block d-inline-block animate">
              <img src="assets/image/svg/delivery-truck.svg" alt="delivery icon" class="img-fluid support-icon">
            </li>
            <li class="d-sm-inline-block d-md-block d-inline-block align-middle serv_">
              <h6 class="mt-3 shipping">全 球 配 送</h6>
              <p class="variations">我们提供全球配送服务，确保您的商品能够准时送达。</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div>
          <ul class="service">
            <li class="d-sm-inline-block d-md-block d-inline-block animate">
              <img src="assets/image/icon/icon2.png" alt="delivery icon" class="img-fluid support-icon ">
            </li>
            <li class="d-sm-inline-block d-md-block d-inline-block align-middle serv_">
              <h6 class="mt-3 shipping">24/7 在 线 支 持</h6>
              <p class="variations">我们的客服团队全天候在线，为您解答任何问题。</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div>
          <ul class="service">
            <li class="d-sm-inline-block d-md-block d-inline-block animate">
              <img src="assets/image/svg/money-bag.svg" alt="delivery icon" class="img-fluid support-icon money-bag ">
            </li>
            <li class="d-sm-inline-block d-md-block d-inline-block align-middle serv_">
              <h6 class="mt-3 shipping">资 金 担 保</h6>
              <p class="variations">您的资金安全得到严格保障，让购物更加安心。</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-3 col-md-6 col-sm-12">
        <div>
          <ul class="service">
            <li class="d-sm-inline-block d-md-block d-inline-block animate">
              <img src="assets/image/svg/gift-card.svg" alt="delivery icon" class="img-fluid support-icon money-bag">
            </li>
            <li class="d-sm-inline-block d-md-block d-inline-block align-middle serv_">
              <h6 class="mt-3 shipping">赢 取 优 惠 券</h6>
              <p class="variations">通过购物，您将有机会赢取各种优惠券，享受更多折扣。</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- news letter section start -->
  <div id="blog" class="container ">
    <div class="row">
      <div class="col-12">
        <h4 class="product-heading2">最 新 资 讯</h4>
      </div>
    </div>
  </div>
  <?php
  // 获取新闻数据
  $sql = "SELECT id, title, content, image, created_at, view_count FROM news ORDER BY created_at DESC LIMIT 5";
  $result = $conn->query($sql);
  ?>
  <div class="container latest-news-spacing">
    <div class="row section-space-row">
      <div id="latest_news" class="owl-carousel owl-theme">
        <?php if ($result->num_rows > 0): ?>
          <?php while ($row = $result->fetch_assoc()): ?>
            <!-- 新闻条目 -->
            <div class="item">
              <div class="col-12 section-space">
                <figure class="spacing">
                  <div class="banner hover01">
                    <!-- 点击图片跳转到新闻详情页 -->
                    <a href="news.detail.php?id=<?php echo $row['id']; ?>">
                      <img src="<?php echo !empty($row['image']) ? $row['image'] : 'assets/image/Blog/default.jpg'; ?>" alt="blog" class="img-fluid">
                    </a>
                  </div>
                  <div class="row">
                    <div class="col-12 all-news">
                      <!-- 新闻发布日期 -->
                      <p class="date"><?php echo date('d M, Y', strtotime($row['created_at'])); ?></p>
                      <!-- 新闻标题 -->
                      <p class="sub-heading-news">
                        <a href="news.detail.php?id=<?php echo $row['id']; ?>">
                          <?php echo htmlspecialchars($row['title']); ?>
                        </a>
                      </p>
                      <!-- 新闻内容简述 -->
                      <p class="news-pera">
                        <?php echo substr(htmlspecialchars($row['content']), 0, 150) . '...'; ?>
                      </p>
                      <!-- 阅读更多按钮 -->
                      <a href="news.php">
                        <p class="read-btn">READ MORE</p>
                      </a>
                    </div>
                  </div>
                </figure>
              </div>
            </div>
          <?php endwhile; ?>
        <?php else: ?>
          <p>暂无新闻内容。</p>
        <?php endif; ?>
      </div>
    </div>
  </div>
  <br>
  <?php
  include 'footer.php';
  ?>
  </script>
  <script src="assets/js/jquery-3.4.1.min.js"></script>
  <script src="assets/js/owl.carousel.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/jquery.fancybox.min.js"></script>
  <script src="assets/js/custom.js"></script>
</body>

</html>